<template>
    <div class="member">
        <el-row style="display:flex;">
            <span>姓名:</span>
            <el-input v-model="searchParam.conditions[0].value" placeholder="请输入内容" size="small" style="width:10vw"></el-input>
            <span>性别:</span>
            <el-select v-model="searchParam.conditions[1].value" placeholder="请选择" size="small" style="width:10vw">
                <el-option
                v-for="item in [{value: '', label: '全部'},{value: 0, label: '男'},{value: 1, label: '女'},{value: 2, label: '未知'}]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="getMemberList()">搜索</el-button>
        </el-row>
        <el-divider></el-divider>
        <el-table   :data="memberList"   style="width: 100%">
            <el-table-column label="姓名"  prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="上报设备" prop="deviceName"></el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p><el-image style="width: 200px;" :src="scope.row.photo"></el-image></p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">查看图片</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">
                        {{ 
                        $utils.formatDate(scope.row.createDate,"YYYY-MM-DD HH:mm:ss") 
                        }}
                    </span>
                </template>
            </el-table-column>
            
            <el-table-column label="性别">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">
                        {{ 
                        scope.row.gender == 0 ? '男' : (scope.row.gender == 1 ? '女' : '未知') 
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button> -->
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id,scope.row.deviceId)">删除</el-button>     
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="currentChange"
            :page-size="searchParam.pageSize"
            :current-page.sync="searchParam.pageNum"
            :total="searchParam.total"
        />
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    name: "member",
    data() {
        return {
            memberList: [],
            searchParam: {pageNum: 1, pageSize: 2, conditions: [{key: "name", value: "", method: "like"},{key: "gender", value: '', method: "eq"}], total: 0}
        };
    },
    created() {
    },
    mounted(){
        this.getMemberList()
    },
    computed: {
    },
    methods: {
        getMemberList(){
            request({
                url: '/rest/member/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    this.memberList = res.data.records
                    this.searchParam.total = res.data.total
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        currentChange(){
            this.getMemberList()
        },
        handleDelete(id,deviceId){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request({
                    url: '/rest/member/delete/' + id + '/' + deviceId,
                    method: 'get',
                }).then(res => {
                    if(res.status){
                        this.getMemberList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            }).catch(() => {});
        }
    }
};
</script>

<style lang="scss" scoped>
.member {
    margin: 0 auto;
    height: 100%;
    width: -webkit-fill-available;
}
</style>




